CSS Shadows

In this advance series of CSS tutorials, we will be learning how to create shadow effects on element content and box.

CSS Shadow Effect

In CSS we have two different properties to add shadow to text content or the element box.

  • text-shadow
  • box-shadow

CSS Text Shadow

With the help of text-shadow property, we can generate a shadow effect on the text content.

Syntax 

{text-shadow: horizontal-shadow vertical-shadow;}

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                text-shadow: 2px 2px;
            }
        </style>
    </head>
<body>
    <p>Welcome to techgeekbuzz</p>
</body>
</html>

Add Color to shadow

We can also specify the color of the text's shadow, by putting a color value after horizontal and vertical length.

Syntax 

{text-shadow: horizontal-shadow vertical-shadow color;}

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                text-shadow: 2px 2px red;
            }
        </style>
    </head>
<body>
    <p>Welcome to techgeekbuzz</p>
</body>
</html>

Shadow Blur Effect

Instead of showing the clear shadow, we can provide a blur effect on the shadow by specifying the blur value between color and horizontal parameters.

Syntax 

{text-shadow: horizontal-shadow vertical-shadow blur color;}

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                text-shadow: 2px 2px 3px red;
            }
        </style>
    </head>
<body>
    <p>Welcome to techgeekbuzz</p>
</body>
</html>

Multiple Shadows

We can also specify multiple shadows to single text content. To do so we use the comma to separate two different text-shadow values. By providing multiple shadows we get a smoot beautiful glow shadow.

Syntax 

{text-shadow: horizontal-shadow1 vertical-shadow1  blur1 color1, horizontal-shadow2 vertical-shadow2  blur2 color2 ;}

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                text-shadow: 2px 2px 3px red,2px 2px 3px yellow;
            }
        </style>
    </head>
<body>
    <p>Welcome to techgeekbuzz</p>
</body>
</html>

Border Around the text

Using the text-shadow property we can create an effect on which a plain border covers the text content.

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color: yellow;
                text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
            }
        </style>
    </head>
<body>
    <p>Welcome to techgeekbuzz</p>
</body>
</html>

Box Shadow

The box-shadow property applies the shadow effect on the element box. By using the box-shadow property we can create a 2-d effect on the element. And it accepts the same set of values like text-shadow property.

Syntax 

 {box-shadow: horizontal-shadow vertical-shadow color;}

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .box {
                width: 200px;
                height: 50px;
                color: white;
                background-color: black;
                box-shadow: 10px 10px grey;
            }
        </style>
    </head>
<body>
    <div class="box">Welcome to techgeekbuzz</div>
</body>
</html>

Create a Card using box-shadow Property

box-shadow property is commonly used to create 2-D cards for the web pages.

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .box {
             width: 200px;
             padding: 70px 0;
             background-color: lightblue;
             box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
             text-align: center;
            }
        </style>
    </head>
<body>
    <div class="box">Welcome to techgeekbuzz</div>
</body>
</html>

Summary

  • There are two properties that can create shadow effects box-shadow , text-shadow .
  • The text-shadow property creates a shadow effect only on the text content of the element.
  • The box-shadow property creates a shadow effect on the complete element box.
  • Both properties accept the same value and parameters.
  • box-shadow property is commonly used for creating cards.
Previous Tutorial Next Tutorial